<template>
	<widget-root :styles="styles" v-if="content.data.length">
		<view class="banner" :style="{
	    'border-radius': `${$px2rpx(styles.border_radius)}rpx`,
	    'height': `${(styleHeight / 750) * 100}%`,
	  }">
			<view class="act-name flex flex-wrap" :style="[titleStyle]">
				<view :class="{'span':true,'choosed':choose_id==0}" @tap="chooseAct(0)">{{actName}}</view>
				<view :class="{'span':true,'choosed':choose_id==1}" v-if="content.data[1]" @tap="chooseAct(1)">
					{{actName2}}
				</view>
			</view>
			<view class="nav-box">
				<view :style="{
					'position': 'relative',
				}">
					<swiper @change="swiperChange" :current="current" :autoplay="true" :style="{
					'height': `${$px2rpx(swiperHeight)}rpx`,
					'min-height': `300rpx`,  
				}">
						<swiper-item v-for="(item, index) in actInfo.url" :key="index">
							<image :id="'content-wrap'+index" :src="$getImageUri(item)" mode="widthFix"
								:style="[imageStyle]"></image>
						</swiper-item>
					</swiper>
					<indicator :current="current" :length="actInfo.url.length" :type="styles.indicator_style"
						:align="styles.indicator_align" :color="styles.indicator_color" />
				</view>
				<view class="cgp-box p-20">
					<view class="flex">
						<view class="desc">{{$zhTran('限时抢购')}}</view>
						<count-down :time-end="actInfo.cgp_info.end_time" color="rgba(74, 25, 0, 1)"
							separator-color="rgba(38, 38, 38, 1)" bg-color="rgba(255, 208, 0, 1)"
							v-if="content.show_countdown" />
					</view>
					<view class="flex row-between">
						<view class="desc">{{$zhTran('已销售'+saleCount+'单')}}</view>
						<view class="cgp-detail-btns" v-if="content.show_btn" :style="[btnStyles]"
							@tap="navigate(actInfo.cgp_info.id)">{{$zhTran('了解详情')}}</view>
					</view>
				</view>
			</view>
		</view>
	</widget-root>
</template>

<script type="text/javascript">
	import {
		location_key
	} from "@/config/app";
	import {
		apiCommunityGroupPurchaseNearLeaderDetail,
		apiCommunityGroupPurchaseActivitySaleCount
	} from "@/api/community_group_purchase"
	export default {
		props: {
			content: {
				type: [Object, Array]
			},
			styles: {
				type: [Object, Array]
			},
		},
		data() {
			return {
				current: 0,
				location: {}, // 我的位置
				authLocation: 0,
				leader_id: '',
				choose_id: 0,
				saleCount: 0,
				swiperHeight: 0
			}
		},
		computed: {
			styleHeight() {
				return this.styles.height == undefined || this.styles.height == 0 ?
					340 : this.styles.height;
			},
			imageStyle() {
				const {
					border_radius
				} = this.styles;
				return {
					width: '100%',
					height: 'calc(100% - 200rpx)',
					borderRadius: `${this.$px2rpx(border_radius)}rpx`,
				};
			},
			titleStyle() {
				const {
					title_size
				} = this.styles;
				return {
					fontSize: `${title_size}px`,
				};
			},
			btnStyles() {
				const {
					btn_color,
					btn_size,
					btn_bg_color
				} = this.styles;
				return {
					color: btn_color,
					fontSize: `${btn_size}px`,
					backgroundColor: btn_bg_color,
				};
			},
			actName() {
				const {
					data
				} = this.content;
				return data[0] && data[0].cgp_info.nicktitle != '' ? data[0].cgp_info.nicktitle : this.$zhTran('活动名称1');
			},
			actName2() {
				const {
					data
				} = this.content;
				return data[1] && data[1].cgp_info.nicktitle != '' ? data[1].cgp_info.nicktitle : this.$zhTran('活动名称2');
			},
			actInfo() {
				return this.content.data[this.choose_id]
			}
		},
		methods: {
			swiperChange({
				detail
			}) {
				this.current = detail.current;
				this.setSwiperHeight();
			},
			chooseAct(id) {
				if (this.choose_id == id) return

				this.current = 0
				this.choose_id = id
				this.getActivitySaleCount()
			},
			navigate(id) {
				this.$Router.push({
					path: "/bundle2/pages/community_group_purchase/user/activity_detail",
					query: {
						cgp_id: id,
						leader_id: this.leader_id
					},
				});
			},
			// 获取位置
			async getLocation() {
				const [error, data] = await uni.getLocation({
					type: 'gcj02'
				})
				// #ifdef MP
				if (!data) return this.getAuthorize()
				// #endif
				// #ifdef APP-PLUS
				if (!data) return this.$toast({
					title: this.$zhTran('获取位置失败')
				})
				// #endif
				return {
					latitude: data.latitude,
					longitude: data.longitude
				}
			},

			// 位置授权
			async getAuthorize() {
				const [error, data] = await uni.showModal({
					title: this.$zhTran('您已拒绝地理位置权限'),
					content: this.$zhTran('是否进入权限管理，调整授权？')
				})

				if (data.confirm) {
					const [error, data] = await uni.openSetting()
					if (data) this.getLocation()
				} else if (data.cancel) {
					this.$Router.back()
				}
			},
			getNearLeaderList() {
				apiCommunityGroupPurchaseNearLeaderDetail({
					location: this.location,
					mapkey: location_key,
					authLocation: this.authLocation,
				}).then(({
					data,
				}) => {
					console.log('leaderpage', data)
					this.leader_id = data.id
				}).catch(() => {})
			},
			getActivitySaleCount() {
				apiCommunityGroupPurchaseActivitySaleCount({
					cgp_id: this.content.data[this.choose_id].cgp_info.id,
				}).then(({
					count
				}) => {
					this.saleCount = count
					//动态设置swiper的高度
					this.setSwiperHeight();
				}).catch(() => {})
			},
			//动态设置swiper的高度
			setSwiperHeight() {
				let element = "#content-wrap" + this.current;
				let query = uni.createSelectorQuery().in(this);
				query.select(element).boundingClientRect();
				query.exec((res) => {
					if (res && res[0]) {
						this.swiperHeight = res[0].height;
					}
					console.log('res', res[0].height)
				});
			},
		},
		async created() {
			var that = this
			uni.getSetting({
				success(res) {
					var authLocation = 0
					if (res.authSetting['scope.userLocation'] != undefined && res.authSetting[
							'scope.userLocation']) {
						authLocation = 1
					}
					that.authLocation = authLocation
				}
			})
			try {
				console.log(this.authLocation)
				if (this.authLocation) {
					const data = await this.getLocation()
					if (!data) throw new Error(this.$zhTran('位置获取失败'))
					this.location = data
				}

				await this.getNearLeaderList()
				await this.getActivitySaleCount()
			} catch (err) {
				console.log(err)
				this.$toast({
					title: this.$zhTran(err.message)
				})
			}
		},

	};
</script>

<style lang="scss" scoped>
	.banner {
		height: 0;
		box-sizing: border-box;
		overflow: hidden;
		transform: translateY(0);

		.act-name {

			.span {
				padding: 6px 20px;
				border-radius: 10px 10px 0 0;
				background: #fbf5f5;
				color: #201f1f;

				&.choosed {
					background: #fe771c;
					color: #ffffff;
				}
			}
		}

		.nav-box {
			width: 100%;

			.cgp-box {
				background-color: #fff;

				.desc {
					color: #fe3d46;
					font-size: 28rpx;
					font-weight: bold;
					margin-right: 20rpx;
				}

				.cgp-detail-btns {
					padding: 14rpx 50rpx;
					border-radius: 100rpx;
				}
			}
		}
	}
</style>